<template>
	<el-popover v-bind="popoverConfig" v-model="visible" v-removeAriaHidden:popover>
		<div class="select_icon_button" slot="reference">
			<i :class="selectedIcon"></i>
			<el-button type="text">选择图标</el-button>
		</div>
		<div class="select_icon_list">
			<template v-if="elementIcons.length > 0">
				<template v-for="(item, index) in elementIcons">
					<span :class="item.font_class" :title="item.name" @click="handleSelectIcon(item.font_class)"></span>
				</template>
			</template>
			<div class="empty" v-else>暂无可选图标</div>
		</div>
	</el-popover>
</template>

<script>
const jsonData = require('@/assets/font/iconfont.json');
export default {
	props: {
		value: String
	},
	data() {
		return {
			visible: false,
			selectedIcon: this.value,
			popoverConfig: {
				width: 494,
				trigger: 'click',
				placement: 'bottom-start',
				popperClass: 'select_icon_wrapper'
			}
		};
	},
	computed: {
		elementIcons() {
			return jsonData.glyphs.map((item) => {
				return { ...item, font_class: `${jsonData.css_prefix_text}${item.font_class}` };
			});
		}
	},
	watch: {
		value(val) {
			this.selectedIcon = val;
		},
		selectedIcon(val) {
			this.$emit('input', val);
		},
		elementIcons: {
			handler(arr) {
				console.log(arr);
			},
			immediate: true
		}
	},
	methods: {
		handleSelectIcon(icon) {
			this.visible = false;
			this.selectedIcon = icon;
		}
	}
};
</script>

<style lang="scss" scoped>
.select_icon_button {
	display: flex;
	align-items: center;
	i {
		width: 34px;
		height: 34px;
		font-size: 24px;
		line-height: 34px;
		text-align: center;
		border: solid 1px #ccc;
	}
	.el-button {
		color: #606266;
		padding: 10px;
	}
}
.select_icon_list {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 6px;
	max-height: 300px;
	overflow-y: auto;
	padding: 10px;
	span {
		display: block;
		padding: 5px;
		line-height: 1;
		font-size: 22px;
		border-radius: 4px;
		border: solid 1px #dcdfe6;
		overflow: hidden;
		cursor: pointer;
		color: #606266;
		&:hover {
			color: #303133;
			border-color: var(--primary-border-hover);
			background-color: var(--primary-background-hover);
		}
	}
	&:has(.empty) {
		grid-template-columns: repeat(1, 1fr);
	}
}
</style>
<style>
.select_icon_wrapper {
	padding: 0;
}
</style>
